<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自助式分析系统-仪表板操作</title>
</head>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/echarts.js"></script>
    <script src="/js/ecStat.js"></script>
    <script src="/js/china.js"></script>
    <script src="/js/html2canvas.js"></script>
    <script src="/js/echarts-wordcloud.js"></script>
<style>
    div{
        display: inline-flex;
    }
    #main{
        width: 100%;
        height: 100vh;
        position: relative;
    }
    #templates{
        width: 10%;
        height: 100vh;
        position: absolute;
        left: 0px;
        flex-direction: column;
    }
    #charts{
        width: 10%;
        height: 100vh;
        position: absolute;
        right: 0px;
        flex-direction: column;
    }
    #temp_bt{
        width: 5vh;
        height: 4vh;
        position: absolute;
        top: 50vh;
        left: 10%;
        cursor: pointer;
        opacity: 0.2;
        z-index: 999;
    }
    #chart_bt{
        width: 5vh;
        height: 4vh;
        position: absolute;
        top: 50vh;
        right: 10%;
        cursor: pointer;
        opacity: 0.2;
        z-index: 999;
    }
    #test{
        width: 12vh;
        height: 100%;
    }


    .save_chart{
        position: relative;
        width: 100%;
        height: 10%;
        padding: 0px;
        margin: 0px;
        cursor: default;
    }
    .temp{
        position: relative;
        width: 100%;
        height: 10%;
        padding: 0px;
        margin: 0px;
        cursor: pointer;
    }
    #template{
        width: 80%;
        height: 98vh;
        position: absolute;
        left: 10%;
    }
    #tool{
        width: 80%;
        height: 10vh;
        position: absolute;
        left: 10%;
    }
    .temp img{
        width: 100%;
    }
    .drop_temp div:first-child,.drop_temp canvas{
        width: 100% !important;
    }
    #templates div{
        border-right: 1px solid black;
        border-bottom: 1px solid black;

    }
    #charts div{
        border-left: 1px solid black;
        border-bottom: 1px solid black;

    }
    #templates{
        border-right: 1px solid black;
    }
    .drop_temp{
        border: 1px solid black;
    }
    #save_img{
        position: absolute;
        left: 49%;
        top: 2vh;
        width: 3vh;
        height: 3vh;
        cursor: pointer;
        display: none;
        z-index: 999;
    }
    .drop_temp div{
        width: 20vh;
        height: 5vh;
    }
    #chart0 > div:nth-child(2),
    #chart1 > div:nth-child(2),
    #chart2 > div:nth-child(2),
    #chart3 > div:nth-child(2),
    #chart4 > div:nth-child(2){
        width: auto !important;
        height: auto !important;
    }
    #top0, #bottom0{
        width: 100%;
        height: 50%;
        flex-direction: row;
    }
    #top0 div, #bottom0 div{
        width: 50%;
        height: 100%;
    }

    #left1, #right1{
        width: 24%;
        height: 100%;
        flex-direction: column;
    }
    #middle1{
        height: 100%;
        width: 52%;
    }
     #middle1 div{
        height: 100%;
        width: 100%;
    }
    #left1 div, #right1 div{
        height: 50%;
        width: 100%;
    }
    .temp1{
        width:100%;
        height:100%;
    }
    .temp2{
        width:50%;
        height:100%;
    }
    .temp3left{
        width: 50%;
        height: 100%;
        flex-direction: column;
    }
    .temp3right{
        width: 50%;
        height: 100%;
    }
    .temp3right div{
        width: 100%;
        height: 100%;
    }
    .temp3left div{
        width: 100%;
        height: 50%;
    }
    .temp4left{
        width: 30%;
        height: 100%;
        flex-direction: column;
    }
    .temp4right{
        width: 40%;
        height: 100%;
    }
    .temp4middle{
        width: 40%;
        height: 100%;
    }
    .temp4right div{
        width: 100%;
        height: 100%;
    }
    .temp4middle div{
        width: 100%;
        height: 100%;
    }
    .temp4left div{
        width: 100%;
        height: 50%;
        flex-direction: column;
    }
    .temp5left{
        width: 30%;
        height: 100%;

    }
    .temp5right{
        width: 30%;
        height: 100%;
    }
    .temp5middle{
        width: 40%;
        height: 100%;
        flex-direction: column;
    }
    .temp5right div{
        width: 100%;
        height: 100%;
    }
    .temp5middle div{
        width: 100%;
        height: 50%;
    }
    .temp5left div{
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    #left2, #right2{
        width: 33%;
        height: 100%;
        flex-direction: column;
    }
    #middle2{
        width: 34%;
        height: 100%;
        flex-direction: column;
    }
    #left2 div, #middle2 div, #right2 div{
        width: 100%;
        height: 50%;
    }
</style>

<body>

    <div id="main">
        <div id="templates">
            <div class="temp" id="temp0">
                <img src="/images/template1.png">
            </div>
            <div class="temp" id="temp1">
                <img src="/images/template2.png">
            </div>
            <div class="temp" id="temp2">
                <img src="/images/template3.png">
            </div>
            <div class="temp" id="temp3">
                <img src="/images/template4.png">
            </div>
            <div class="temp" id="temp4">
                <img src="/images/template5.png">
            </div>
            <div class="temp" id="temp5">
                <img src="/images/template6.png">
            </div>
            <div class="temp" id="temp6">
                <img src="/images/template7.png">
            </div>
            <div class="temp" id="temp7">
                <img src="/images/template8.png">
            </div>
            <div class="temp" id="temp8">
                <img src="/images/template9.png">
            </div>
            <div class="temp" id="temp9">
                <img src="/images/template10.png">
            </div>
        </div>
        <div id="charts">
            <div class="save_chart" id="save_chart0" ondragstart="setOptionIndex(event)"
                         ondragend="end_save_chart(event)"></div>
            <div class="save_chart" id="save_chart1" ondragstart="setOptionIndex(event)"
                         ondragend="end_save_chart(event)"></div>
            <div class="save_chart" id="save_chart2" ondragstart="setOptionIndex(event)"
                         ondragend="end_save_chart(event)"></div>
            <div class="save_chart" id="save_chart3" ondragstart="setOptionIndex(event)"
                         ondragend="end_save_chart(event)"></div>
            <div class="save_chart" id="save_chart4" ondragstart="setOptionIndex(event)"
                         ondragend="end_save_chart(event)"></div>
            <div class="save_chart" id="save_chart5" ondragstart="setOptionIndex(event)"
                         ondragend="end_save_chart(event)"></div>
            <div class="save_chart" id="save_chart6" ondragstart="setOptionIndex(event)"
                         ondragend="end_save_chart(event)"></div>
            <div class="save_chart" id="save_chart7" ondragstart="setOptionIndex(event)"
                         ondragend="end_save_chart(event)"></div>
            <div class="save_chart" id="save_chart8" ondragstart="setOptionIndex(event)"
                         ondragend="end_save_chart(event)"></div>
            <div class="save_chart" id="save_chart9" ondragstart="setOptionIndex(event)"
                         ondragend="end_save_chart(event)"></div>
        </div>
        <img src="/images/left.png" id="temp_bt">
        <img src="/images/right.png" id="chart_bt">
        <img id="save_img" src="/images/download.png">
        <div id="template">

        </div>
    </div>

    <img src="" id="screenShotImg" style="display:none;">
</body>
<script>
    echarts.registerTransform(ecStat.transform.regression);
    echarts.registerTransform(ecStat.transform.clustering);



    $(document).ready(function () {
        document.querySelector('#save_img').onclick = function(){

                  html2canvas(document.querySelector("#template")).then(function (canvas) {

                  //获取截取图片路径

                  var base64Url = canvas.toDataURL('image/png');

                  //存入页面指定位置

                  document.getElementById("screenShotImg").src = base64Url;

                  //后台操作处理

                var base64 = "<img src=" + base64Url + " />"
                var img = document.querySelector("#screenShotImg")
                // 将图片的src属性作为URL地址
                var url = img.src
                var a = document.createElement('a')
                var event = new MouseEvent('click')

                a.download = "保存结果"
                a.href = url

                a.dispatchEvent(event)

               });

        }

    });

    var save_charts = [];
    var options = {{options|safe}};
    var temp_charts = [];
    var temp_options = {};
    var temp_index_curr;
    for(var i = 0; i < 10; i++){
        save_charts.push(echarts.init(document.getElementById('save_chart'+i)));
    }

    for(var i = 0; i < options.length; i++){

        if(options[i].series[0].type === 'wordCloud'){
            //options[i].series[0].textStyle.color = get_color();
            options[i].series[0].textStyle.color = function () {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                };

        }
        $("#save_chart"+i).attr("draggable","true");
        save_charts[i].setOption(options[i]);
    }
    var temp_bt_info = true;
    $("#temp_bt").click(function(){
        if(temp_bt_info){
            $("#templates").css("display", "none");
            $("#templates").css("transition", "1s");
            $("#temp_bt").attr("src", "/images/right.png");
            $("#temp_bt").css("left", "0vh");
            $("#temp_bt").css("transition", "1s");
            temp_bt_info = false;
        }else{
            $("#templates").css("display", "block");
            $("#templates").css("transition", "1s");
            $(".temp").css("height","9.5%")
            $("#temp_bt").attr("src", "/images/left.png");
            $("#temp_bt").css("left", "10%");
            $("#temp_bt").css("transition", "1s");
            $("#template").css("transition", "1s");
            temp_bt_info = true;
        }
        if(temp_bt_info == false && chart_bt_info == false){
            console.log("左边收缩,右边收缩");
            $("#template").css("left", "0");
            $("#template").css("width", "100%");
            $("#template").css("transition", "1s");
            if(temp_index_curr == 0){
                var temp = '<div id="chart0" class="temp1 drop_temp"></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 1; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 1){
                 var temp = '<div id="chart0" class="temp2 drop_temp"></div><div id="chart1" class="temp2 drop_temp"></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 2; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 2){
                var temp = '<div id="chart0" class="temp2 drop_temp"></div><div id="chart1" class="temp2 drop_temp"></div><div id="chart2" class="temp2 drop_temp"></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 3; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 3){
                var temp = '<div class="temp3left"><div id="chart0" class="temp3 drop_temp"></div><div id="chart1" class="temp3 drop_temp"></div></div><div class="temp3right"><div id="chart2" class="temp3 drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 3; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 4){
                var temp = '<div id="top0"><div id="chart0" class="drop_temp" style="text-align:center;"></div><div id="chart1" class="drop_temp" style="text-align:center;"></div></div>'+
                '<div id="bottom0"><div id="chart2" class="drop_temp" style="text-align:center;"></div><div id="chart3" class="drop_temp" style="text-align:center;"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 4; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 5){
                var temp = '<div class="temp4left"><div id="chart0" class="temp3 drop_temp"></div><div id="chart1" class="temp3 drop_temp"></div></div><div class="temp4middle"><div id="chart2" class="temp3 drop_temp"></div></div><div class="temp4right"><div id="chart3" class="temp3 drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 4; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 6){
                var temp = ' <div class="temp5left"><div id="chart0" class="temp3 drop_temp"></div></div><div class="temp5middle"><div id="chart1" class="temp3 drop_temp"></div><div id="chart2" class="temp3 drop_temp"></div></div><div class="temp5right"><div id="chart3" class="temp3 drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 4; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 7){
                var temp = '<div class="temp4right"><div id="chart0" class="temp3 drop_temp"></div></div><div class="temp4middle"><div id="chart1" class="temp3 drop_temp"></div></div><div class="temp4left"><div id="chart2" class="temp3 drop_temp"></div><div id="chart3" class="temp3 drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 4; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 8){
                var temp = '<div id="left1" ><div id="chart0"  class="drop_temp" ></div><div id="chart1"  class="drop_temp"></div></div><div id="middle1"><div id="chart2" class="drop_temp"></div></div><div id="right1"><div id="chart3" class="drop_temp"></div><div id="chart4" class="drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 5; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 9){
                var temp = '<div id="left2" ><div id="chart0"  class="drop_temp" ></div><div id="chart1"  class="drop_temp"></div></div><div id="middle2"><div id="chart2" class="drop_temp"></div><div id="chart3" class="drop_temp"></div></div><div id="right2"><div id="chart4" class="drop_temp"></div><div id="chart5" class="drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 6; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }
            $(".drop_temp").css("border", "0");
            $("#save_img").css("display", "block");
        }else if(temp_bt_info && chart_bt_info == false){
            console.log("左边张开,右边收缩");
            $("#template").css("left", "10%");
            $("#template").css("width", "90%");
            $("#template").css("transition", "1s");
            $(".drop_temp").css("border", "1px solid black");
            $("#save_img").css("display", "none");
        }else if(temp_bt_info && chart_bt_info){
            console.log("左边张开,右边张开");
            $("#template").css("left", "10%");
            $("#template").css("width", "80%");
            $("#template").css("transition", "1s");
            $(".drop_temp").css("border", "1px solid black");
            $("#save_img").css("display", "none");
        }else{
            console.log("左边收缩,右边张开");
            $("#template").css("left", "0");
            $("#template").css("width", "90%");
            $("#template").css("transition", "1s");
            $(".drop_temp").css("border", "1px solid black");
            $("#save_img").css("display", "none");
        }
    })
    var chart_bt_info = true;
    $("#chart_bt").click(function(){
        if(chart_bt_info){
            $("#charts").css("display","none")
            $("#chart_bt").attr("src", "/images/left.png");
            $("#chart_bt").css("right", "0%");
            $("#chart_bt").css("transition", "1s");
            //$(".save_chart").css("width", "0");
            //$(".save_chart").css("transition", "1s");
            var save_charts = document.getElementsByClassName("save_chart");
            for(var i = 0; i < save_charts.length; i++){
                save_charts[i].innerHTML = "";
            }
            chart_bt_info = false;
        }else{
            $("#charts").css("display", "");
            $("#chart_bt").css("transition", "1s");
            $("#chart_bt").attr("src", "/images/right.png");
            $("#chart_bt").css("right", "10%");
            $("#chart_bt").css("transition", "1s");
            //$(".save_chart").css("width", "100%");
            var drop_temps = document.getElementsByClassName("drop_temp");
            [].forEach.call(drop_temps,function(current,index){
                current.addEventListener("dragenter",temp_drag,false);
                current.addEventListener("dragover",temp_drag,false);
                current.addEventListener("dragleave",temp_drag,false);
                current.addEventListener("drop",temp_drag,false);

            });
            for(var i = 0; i < options.length; i++){
                $("#save_chart"+i).bind("dragstart",setOptionIndex);
                $("#save_chart"+i).bind("dragend",end_save_chart);
            }

            var temp = ""
            for(var i = 0; i < 10; i++){
                temp += '<div class="save_chart" id="save_chart'+i+'" ondragstart="setOptionIndex(event)"'+
                         'ondragend="end_save_chart(event)"></div>'
            }
            $("#charts").html(temp);
            save_charts = [];
            for(var i = 0; i < 10; i++){
                save_charts.push(echarts.init(document.getElementById('save_chart'+i)));
            }
            for(var i = 0; i < options.length; i++){
                save_charts[i].setOption(options[i]);
                $("#save_chart"+i).attr("draggable","true");
            }
            chart_bt_info = true;
        }
         if(temp_bt_info == false && chart_bt_info == false){
            console.log("左边收缩,右边收缩");
            $("#template").css("left", "0");
            $("#template").css("width", "100%");
            $("#template").css("transition", "1s");
            if(temp_index_curr == 0){
                var temp = '<div id="chart0" class="temp1 drop_temp"></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 1; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 1){
                 var temp = '<div id="chart0" class="temp2 drop_temp"></div><div id="chart1" class="temp2 drop_temp"></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 2; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 2){
                var temp = '<div id="chart0" class="temp2 drop_temp"></div><div id="chart1" class="temp2 drop_temp"></div><div id="chart2" class="temp2 drop_temp"></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 3; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 3){
                var temp = '<div class="temp3left"><div id="chart0" class="temp3 drop_temp"></div><div id="chart1" class="temp3 drop_temp"></div></div><div class="temp3right"><div id="chart2" class="temp3 drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 3; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 4){
                var temp = '<div id="top0"><div id="chart0" class="drop_temp" style="text-align:center;"></div><div id="chart1" class="drop_temp" style="text-align:center;"></div></div>'+
                '<div id="bottom0"><div id="chart2" class="drop_temp" style="text-align:center;"></div><div id="chart3" class="drop_temp" style="text-align:center;"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 4; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 5){
                var temp = '<div class="temp4left"><div id="chart0" class="temp3 drop_temp"></div><div id="chart1" class="temp3 drop_temp"></div></div><div class="temp4middle"><div id="chart2" class="temp3 drop_temp"></div></div><div class="temp4right"><div id="chart3" class="temp3 drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 4; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 6){
                var temp = ' <div class="temp5left"><div id="chart0" class="temp3 drop_temp"></div></div><div class="temp5middle"><div id="chart1" class="temp3 drop_temp"></div><div id="chart2" class="temp3 drop_temp"></div></div><div class="temp5right"><div id="chart3" class="temp3 drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 4; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 7){
                var temp = '<div class="temp4right"><div id="chart0" class="temp3 drop_temp"></div></div><div class="temp4middle"><div id="chart1" class="temp3 drop_temp"></div></div><div class="temp4left"><div id="chart2" class="temp3 drop_temp"></div><div id="chart3" class="temp3 drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 4; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 8){
                var temp = '<div id="left1" ><div id="chart0"  class="drop_temp" ></div><div id="chart1"  class="drop_temp"></div></div><div id="middle1"><div id="chart2" class="drop_temp"></div></div><div id="right1"><div id="chart3" class="drop_temp"></div><div id="chart4" class="drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 5; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }else if(temp_index_curr == 9){
                var temp = '<div id="left2" ><div id="chart0"  class="drop_temp" ></div><div id="chart1"  class="drop_temp"></div></div><div id="middle2"><div id="chart2" class="drop_temp"></div><div id="chart3" class="drop_temp"></div></div><div id="right2"><div id="chart4" class="drop_temp"></div><div id="chart5" class="drop_temp"></div></div>'
                $("#template").html(temp);
                temp_charts = []
                for(var i = 0; i < 6; i++){
                    temp_charts.push(echarts.init(document.getElementById('chart'+i)))
                }
                for (var key in temp_options) {
                    temp_charts[key].setOption(temp_options[key])
                }
            }
            $(".drop_temp").css("border", "0");
            $("#save_img").css("display", "block");
        }else if(temp_bt_info && chart_bt_info == false){
            console.log("左边张开,右边收缩");
            $("#template").css("left", "10%");
            $("#template").css("width", "90%");
            $("#template").css("transition", "1s");
            $(".drop_temp").css("border", "1px solid black");
            $("#save_img").css("display", "none");
        }else if(temp_bt_info && chart_bt_info){
            console.log("左边张开,右边张开");
            $("#template").css("left", "10%");
            $("#template").css("width", "80%");
            $("#template").css("transition", "1s");
            $(".drop_temp").css("border", "1px solid black");
            $("#save_img").css("display", "none");
        }else{
            console.log("左边收缩,右边张开");
            $("#template").css("left", "0");
            $("#template").css("width", "90%");
            $("#template").css("transition", "1s");
            $(".drop_temp").css("border", "1px solid black");
            $("#save_img").css("display", "none");
        }
    })
    $(".temp").click(function(){
        var temp_index = $(this).attr('Id').substr(4,1);
        console.log(temp_index);
        if(temp_index == 0){
            var temp = '<div id="chart0" class="temp1 drop_temp"></div>'
            $("#template").html(temp);
            $("#template").css("flex-direction", "column");
            var drop_temps = document.getElementsByClassName("drop_temp");
            [].forEach.call(drop_temps,function(current,index){
                current.addEventListener("dragenter",temp_drag,false);
                current.addEventListener("dragover",temp_drag,false);
                current.addEventListener("dragleave",temp_drag,false);
                current.addEventListener("drop",temp_drag,false);
            });
            temp_charts = []
            for(var i = 0; i < 1; i++){
                temp_charts.push(echarts.init(document.getElementById('chart'+i)))
            }
            temp_index_curr = 0;
        }else if(temp_index == 1){
            var temp = '<div id="chart0" class="temp2 drop_temp"></div><div id="chart1" class="temp2 drop_temp"></div>'
            $("#template").html(temp);
            $("#template").css("flex-direction", "row");
            var drop_temps = document.getElementsByClassName("drop_temp");
            [].forEach.call(drop_temps,function(current,index){
                current.addEventListener("dragenter",temp_drag,false);
                current.addEventListener("dragover",temp_drag,false);
                current.addEventListener("dragleave",temp_drag,false);
                current.addEventListener("drop",temp_drag,false);
            });
            temp_charts = []
            for(var i = 0; i < 2; i++){
                temp_charts.push(echarts.init(document.getElementById('chart'+i)))
            }
            temp_index_curr = 1;
        }else if(temp_index == 2){
            var temp = '<div id="chart0" class="temp2 drop_temp"></div><div id="chart1" class="temp2 drop_temp"></div><div id="chart2" class="temp2 drop_temp"></div>'
            $("#template").html(temp);
            $("#template").css("flex-direction", "row");
            var drop_temps = document.getElementsByClassName("drop_temp");
            [].forEach.call(drop_temps,function(current,index){
                current.addEventListener("dragenter",temp_drag,false);
                current.addEventListener("dragover",temp_drag,false);
                current.addEventListener("dragleave",temp_drag,false);
                current.addEventListener("drop",temp_drag,false);
            });
            temp_charts = []
            for(var i = 0; i < 3; i++){
                temp_charts.push(echarts.init(document.getElementById('chart'+i)))
            }
            temp_index_curr = 2;
        }else if(temp_index == 3){
            var temp = '<div class="temp3left"><div id="chart0" class="temp3 drop_temp"></div><div id="chart1" class="temp3 drop_temp"></div></div><div class="temp3right"><div id="chart2" class="temp3 drop_temp"></div></div>'
            $("#template").html(temp);
            $("#template").css("flex-direction", "row");
            var drop_temps = document.getElementsByClassName("drop_temp");
            [].forEach.call(drop_temps,function(current,index){
                current.addEventListener("dragenter",temp_drag,false);
                current.addEventListener("dragover",temp_drag,false);
                current.addEventListener("dragleave",temp_drag,false);
                current.addEventListener("drop",temp_drag,false);
            });
            temp_charts = []
            for(var i = 0; i < 3; i++){
                temp_charts.push(echarts.init(document.getElementById('chart'+i)))
            }
            temp_index_curr = 3;
        }else if(temp_index == 4){
            var temp = '<div id="top0"><div id="chart0" class="drop_temp" style="text-align:center;"></div><div id="chart1" class="drop_temp" style="text-align:center;"></div></div>'+
            '<div id="bottom0"><div id="chart2" class="drop_temp" style="text-align:center;"></div><div id="chart3" class="drop_temp" style="text-align:center;"></div></div>'
            $("#template").html(temp);
            $("#template").css("flex-direction", "column");
            var drop_temps = document.getElementsByClassName("drop_temp");
            [].forEach.call(drop_temps,function(current,index){
                current.addEventListener("dragenter",temp_drag,false);
                current.addEventListener("dragover",temp_drag,false);
                current.addEventListener("dragleave",temp_drag,false);
                current.addEventListener("drop",temp_drag,false);
            });
            temp_charts = []
            for(var i = 0; i < 4; i++){
                temp_charts.push(echarts.init(document.getElementById('chart'+i)))
            }
            temp_index_curr = 4;
        }else if(temp_index == 5){
            var temp = '<div class="temp4left"><div id="chart0" class="temp3 drop_temp"></div><div id="chart1" class="temp3 drop_temp"></div></div><div class="temp4middle"><div id="chart2" class="temp3 drop_temp"></div></div><div class="temp4right"><div id="chart3" class="temp3 drop_temp"></div></div>'
            $("#template").html(temp);
            $("#template").css("flex-direction", "row");
            var drop_temps = document.getElementsByClassName("drop_temp");
            [].forEach.call(drop_temps,function(current,index){
                current.addEventListener("dragenter",temp_drag,false);
                current.addEventListener("dragover",temp_drag,false);
                current.addEventListener("dragleave",temp_drag,false);
                current.addEventListener("drop",temp_drag,false);
            });
            temp_charts = []
            for(var i = 0; i < 4; i++){
                temp_charts.push(echarts.init(document.getElementById('chart'+i)))
            }
            temp_index_curr = 5;
        }else if(temp_index == 6){
            var temp = ' <div class="temp5left"><div id="chart0" class="temp3 drop_temp"></div></div><div class="temp5middle"><div id="chart1" class="temp3 drop_temp"></div><div id="chart2" class="temp3 drop_temp"></div></div><div class="temp5right"><div id="chart3" class="temp3 drop_temp"></div></div>'
            $("#template").html(temp);
            $("#template").css("flex-direction", "row");
            var drop_temps = document.getElementsByClassName("drop_temp");
            [].forEach.call(drop_temps,function(current,index){
                current.addEventListener("dragenter",temp_drag,false);
                current.addEventListener("dragover",temp_drag,false);
                current.addEventListener("dragleave",temp_drag,false);
                current.addEventListener("drop",temp_drag,false);
            });
            temp_charts = []
            for(var i = 0; i < 4; i++){
                temp_charts.push(echarts.init(document.getElementById('chart'+i)))
            }
            temp_index_curr = 6;
        }else if(temp_index == 7){
            var temp = '<div class="temp4right"><div id="chart0" class="temp3 drop_temp"></div></div><div class="temp4middle"><div id="chart1" class="temp3 drop_temp"></div></div><div class="temp4left"><div id="chart2" class="temp3 drop_temp"></div><div id="chart3" class="temp3 drop_temp"></div></div>'
            $("#template").html(temp);
            $("#template").css("flex-direction", "row");
            var drop_temps = document.getElementsByClassName("drop_temp");
            [].forEach.call(drop_temps,function(current,index){
                current.addEventListener("dragenter",temp_drag,false);
                current.addEventListener("dragover",temp_drag,false);
                current.addEventListener("dragleave",temp_drag,false);
                current.addEventListener("drop",temp_drag,false);
            });
            temp_charts = []
            for(var i = 0; i < 4; i++){
                temp_charts.push(echarts.init(document.getElementById('chart'+i)))
            }
            temp_index_curr = 7;
        }else if(temp_index == 8){
            var temp = '<div id="left1" ><div id="chart0"  class="drop_temp" ></div><div id="chart1"  class="drop_temp"></div></div><div id="middle1"><div id="chart2" class="drop_temp"></div></div><div id="right1"><div id="chart3" class="drop_temp"></div><div id="chart4" class="drop_temp"></div></div>'
            $("#template").html(temp);
            $("#template").css("flex-direction", "row");
            var drop_temps = document.getElementsByClassName("drop_temp");
            [].forEach.call(drop_temps,function(current,index){
                current.addEventListener("dragenter",temp_drag,false);
                current.addEventListener("dragover",temp_drag,false);
                current.addEventListener("dragleave",temp_drag,false);
                current.addEventListener("drop",temp_drag,false);
            });
            temp_charts = []
            for(var i = 0; i < 5; i++){
                temp_charts.push(echarts.init(document.getElementById('chart'+i)))
            }
            temp_index_curr = 8;
        }else if(temp_index == 9){
            var temp = '<div id="left2" ><div id="chart0"  class="drop_temp" ></div><div id="chart1"  class="drop_temp"></div></div><div id="middle2"><div id="chart2" class="drop_temp"></div><div id="chart3" class="drop_temp"></div></div><div id="right2"><div id="chart4" class="drop_temp"></div><div id="chart5" class="drop_temp"></div></div>'
            $("#template").html(temp);
            $("#template").css("flex-direction", "row");
            var drop_temps = document.getElementsByClassName("drop_temp");
            [].forEach.call(drop_temps,function(current,index){
                current.addEventListener("dragenter",temp_drag,false);
                current.addEventListener("dragover",temp_drag,false);
                current.addEventListener("dragleave",temp_drag,false);
                current.addEventListener("drop",temp_drag,false);
            });
            temp_charts = []
            for(var i = 0; i < 6; i++){
                temp_charts.push(echarts.init(document.getElementById('chart'+i)))
            }
            temp_index_curr = 9;
        }

    });
    // 模板拖拽事件
    function temp_drag(e){
        e.preventDefault();//阻止浏览器的默认事件
        switch(e.type){
            // 进入目标元素
            case 'dragenter':
                break;
            // 经过目标元素
            case 'dragover':
                break;
            // 离开目标元素
            case 'dragleave':
                break;
            // 释放元素
            case 'drop':
                var temp_index = e.dataTransfer.getData("option_index");
                temp_charts[$(this).attr('id').substr(5,1)].clear();
                temp_charts[$(this).attr('id').substr(5,1)].setOption(options[temp_index]);
                temp_options[$(this).attr('id').substr(5,1)] = options[temp_index]
                e.dataTransfer.clearData("option_index");
                break;
        }
    }
    function setOptionIndex(e){
        e.dataTransfer.setData("option_index", e.target.id.substr(10,1))
        $(".drop_temp").css('background','#FF5722');
    }
    function end_save_chart(e){
        $(".drop_temp").css('background','white');
    }
</script>
</html>